<template>
  <div class="pressure">
    <div class="pressure_cont">
      <div class="pressure_cascader">
        <h2>泵房选择 ：</h2>
        <el-cascader :options="options" v-model="houseId" @change="getHouseId" popper-class="staCascader">
          <template slot-scope="{ node, data }">
            <span>{{ data.value }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </div>
      <div class="radio_cont">
        <!-- <el-checkbox-group v-model="checkList" @change="changeChecked">
          <el-checkbox label="低区"></el-checkbox>
          <el-checkbox label="中区"></el-checkbox>
          <el-checkbox label="高区"></el-checkbox>
        </el-checkbox-group> -->
        <el-radio-group v-model="checkList" @change="changeChecked" :disabled="radioFlg">
          <el-radio label="低区">低区</el-radio>
          <el-radio label="中区">中区</el-radio>
          <el-radio label="高区">高区</el-radio>
        </el-radio-group>
      </div>
      <div class="consume_btn">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="30M" name="30M"></el-tab-pane>
          <el-tab-pane label="1H" name="1H"></el-tab-pane>
          <el-tab-pane label="2H " name="2H"></el-tab-pane>
          <el-tab-pane label="全部" name="30M 1H 2H"></el-tab-pane>
          <el-tab-pane label="自定义" name="fix"></el-tab-pane>
          <!-- <el-tab-pane label="自定义" name="fix"></el-tab-pane> -->
        </el-tabs>
      </div>
      <el-date-picker v-model="dateValue" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']" @change="changeDate" :disabled="custom"
        :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <div class="pressure_echarts">
      <div id="pressure_echarts_main"></div>
    </div>
  </div>
</template>
<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      checkList: '',
      data: [],
      tabPosition: 'left',
      value1: '',
      options: [],
      startDate: '',
      endDate: '',
      dateValue: '',
      radio: 1,
      myChart: {},
      tenantid: 1128,
      devices_id: '',
      houseId: '',
      siteId: '',
      activeName: '30M',
      custom: true,
      radioFlg: true,
      time: '',
      choiceDate: null,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime()
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = ''
        },
        disabledDate: time => {
          // 如何选择了一个日期
          if (this.choiceDate) {
            // 7天的时间戳
            const one = 7 * 24 * 3600 * 1000
            // 当前日期 - one = 7天之前
            const minTime = this.choiceDate - one
            // 当前日期 + one = 7天之后
            const maxTime = this.choiceDate + one
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime
              // 限制不能选择今天及以后
              // time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
            )
          }
          // 如果没有选择日期，就要限制不能选择今天及以后
          // return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
        }
      }
    }
  },
  async created() {
    this.getData(this.siteId, this.activeName)
    // 泵房数据
    const res = await api.house({ tenantid: this.tenantid })
    res.data.forEach(item => {
      this.options.push({ value: item.site_name, label: item.site_name, id: item.id })
    })
  },
  methods: {
    // 单选框触发事件
    async changeChecked() {
      const id = { tenantid: 1128, siteId: this.siteId }
      const res = await api.querySite(id)
      res.data.forEach(item => {
        item.devices.forEach(item2 => {
          if (item2.devices_name == this.checkList) {
            this.devices_id = item2.devices_id
          }
        })
      })
      this.getData(this.siteId, this.activeName, this.startDate, this.endDate, this.devices_id)
    },
    // 选择日期
    changeDate() {
      this.startDate = this.formatDate(this.dateValue[0], 'yyyy-MM-dd')
      this.endDate = this.formatDate(this.dateValue[1], 'yyyy-MM-dd')
      this.getData(this.siteId, this.activeName, this.startDate, this.endDate, this.devices_id)
    },
    // 选择泵房id
    getHouseId() {
      this.options.forEach(item => {
        if (item.value == this.houseId[0]) this.siteId = item.id
      })
      if (this.siteId) this.radioFlg = false
      if (this.activeName == 'fix') {
        if (this.dateValue) {
          this.getData(this.siteId, this.activeName, this.startDate, this.endDate, this.devices_id)
        }
      } else {
        this.getData(this.siteId, this.activeName, this.startDate, this.endDate, this.devices_id)
      }
    },
    async getData(siteIdNum, typeStr, timeStart, timeEnd, devices_id) {
      // 接口参数
      const id = { tenantid: 1128, siteId: siteIdNum, type: typeStr, startDate: timeStart, endDate: timeEnd, devices_id }
      const res = await api.pressure(id)
      // console.log(typeStr)
      this.data = res.data
      this.data.dates.forEach((item, index) => {
        this.data.dates[index] = item.substring(11, item.length - 3)
      })
      this.initChart(this.data)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
    // 切换
    handleClick() {
      if (this.activeName == 'fix') {
        this.custom = false
        this.data = []
      } else {
        this.custom = true
        this.startDate = ''
        this.endDate = ''
        this.dateValue = ''
        this.getData(this.siteId, this.activeName, this.startDate, this.endDate, this.devices_id)
      }
    },
    formatDate(date, fmt) {
      // this.formatDate(date,'yyyy-MM-dd hh:mm:ss')
      let time = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        // eslint-disable-next-line no-dupe-keys
        's+': date.getMilliseconds(),
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in time) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (time[k]) : (('00' + time[k]).substr(('' + time[k]).length)))
        }
      }
      return fmt
    },
    initChart(data) {
      // console.log(data.dates)
      this.myChart = this.$echarts.init(document.getElementById('pressure_echarts_main'))
      this.myChart.setOption({
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        // legend: {
        //   data: ['30M', '1H', '2H', '全部'],
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        grid: {
          top: '3%',
          left: '3%',
          right: '4%',
          // bottom: '3%',
          height: '85%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#409EFF'
              }
            },
            data: data.dates,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'line',
                color: '#ccc'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 11, //段数是11
            splitLine: {
              show: true,
              lineStyle: {
                type: 'line',
                color: '#ccc'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#409EFF'
              }
            }
          }
        ],
        dataZoom: [
          {
            type: 'slider',
            // show: true,
            // height: 8,
            // bottom: 10,
            // fillerColor: '#409EFF',
            // borderColor: 'transparent',
            // backgroundColor: '#7e94bb',
            // // 拖拽手柄样式 svg 路径
            // handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
            // handleColor: '#50d5fd',
            // handleSize: 10,
            start: 20,
            end: 80
          }
        ],
        series: [
          {
            name: 'press_out_cnt',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: data.press_in_cnt
          },
          {
            name: 'press_in_cnt',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: data.press_out_cnt
          }
        ]
      })
      // this.myChart.setOption({
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'cross',
      //       label: {
      //         backgroundColor: '#6a7985'
      //       }
      //     }
      //   },
      //   // legend: {
      //   //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      //   // },
      //   grid: {
      //     left: '3%',
      //     right: '4%',
      //     bottom: '3%',
      //     height: '90%',
      //     containLabel: true
      //   },
      //   xAxis: [
      //     {
      //       type: 'category',
      //       boundaryGap: false,
      //       data: data.dates,
      //       axisLabel: {
      //         show: true,
      //         textStyle: {
      //           color: '#409EFF'
      //         }
      //       },
      //       splitLine: {
      //         show: true,
      //         lineStyle: {
      //           type: 'line',
      //           color: '#ccc'
      //         }
      //       }
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: 'value',
      //       splitNumber: 11, //段数是11
      //       splitLine: {
      //         show: true,
      //         lineStyle: {
      //           type: 'line',
      //           color: '#ccc'
      //         }
      //       },
      //       axisLabel: {
      //         show: true,
      //         textStyle: {
      //           color: '#409EFF'
      //         }
      //       }
      //     }
      //   ],
      //   series: [
      //     {
      //       name: 'Email',
      //       type: 'line',
      //       stack: 'Total',
      //       areaStyle: {},
      //       emphasis: {
      //         focus: 'series'
      //       },
      //       data: data.press_in_cnt
      //     },
      //     {
      //       name: 'Union Ads',
      //       type: 'line',
      //       stack: 'Total',
      //       areaStyle: {},
      //       emphasis: {
      //         focus: 'series'
      //       },
      //       data: data.press_out_cnt
      //     }
      //   ]
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.pressure {
  .pressure_cont {
    width: 8.45rem;
    margin-left: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .radio_cont {
      display: flex;
      align-items: center;

      .el-radio-group {
        display: flex;
        align-items: center;
      }

      .el-checkbox {
        margin-right: 0.1rem;
      }
    }

    .pressure_cascader {
      display: flex;
      align-items: center;
      width: 29%;

      h2 {
        font-size: 0.12rem;
        color: #fff;
      }

      .el-cascader {
        width: 52%;
      }
    }

    .consume_btn {
      display: flex;

      .el-date-editor.el-input {
        width: 50% !important;
      }

      .el-input__prefix {
        right: 0.1rem !important;
      }
    }
  }

  .pressure_echarts {
    width: 9.3rem;
    height: 4.5rem;
    margin-top: 0.4rem;
    margin-left: 0.3rem;

    #pressure_echarts_main {
      width: 100%;
      height: 100%;
    }
  }

  .bottom_cont {
    width: 7.76rem;
    height: 100%;
    margin: 0.3rem 0 0 1.2rem;
    position: relative;
  }

  .line_cont {

    width: 100%;
    height: .04rem;
    background: #FFFFFF;
    opacity: 0.2;
    border-radius: 2px;

    .line {
      width: 3.26rem;
      height: .04rem;
      background: #50D5FD;
      box-shadow: 0px 0px .06rem 0px rgba(80, 213, 253, 0.39);
      opacity: 0.8;
      border-radius: 2px;
      margin: 0 auto;

    }

    .circular_left {
      position: absolute;
      left: 2.2rem;
      top: -0.05rem;
      width: .14rem;
      height: .14rem;
      background: #50D5FD;
      box-shadow: 0px 0px .06rem 0px rgba(2, 88, 114, 0.5);
      border-radius: 50%;
    }

    .circular_right {
      position: absolute;
      right: 2.2rem;
      top: -0.05rem;
      width: .14rem;
      height: .14rem;
      background: #50D5FD;
      box-shadow: 0px 0px .06rem 0px rgba(2, 88, 114, 0.5);
      border-radius: 50%;
    }
  }
}
</style>